<template>
    <video src="../../asstes/video/EP03.mp4" class="video_a" muted autoplay loop></video>
    <div class="login_box">
        <!-- 常规登录 -->
        <div class="login_test">{{pageInfo.title}}</div>
        <!-- 动态组件 -->
        <component :is="pageInfo.component"></component>
        <!-- 短信登录 -->
        <!-- <smsLogin></smsLogin> -->
        <div class="toggle">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="icon"></use>
          </svg>
          <b @click="handleToggle">{{pageInfo.toggleDes}}</b>
        </div>
    </div>
   </template>
   <script setup>
      import commonLogin from './commonLogin.vue'
      import smsLogin from './smsLogin.vue'
      import { ref ,watchEffect,markRaw,computed} from 'vue';

      //声明一个页面数据
      let pageInfo = ref({
        title:'用户登录', 
        loginType:'common', //登入的类型
        toggleDes:'点击切换手机登录', //切换的描述信息
        component:markRaw(commonLogin)//要切换的组件
      })
      //用于标记是否常规登入
      let isCommonLogin = ref(true)


      //点击切换登入方式
      let handleToggle = ()=>{
        isCommonLogin.value = !isCommonLogin.value
      }

      //通过结合高级侦听器和vue3的动态组件来实现切换

      //vue的动态组件
      watchEffect(()=>{
        //常规登录
        if(isCommonLogin.value){
            pageInfo.value = {
              title:'用户登录',
              loginType:'sms',
              toggleDes:'点击切换手机登录',
              component:markRaw(commonLogin)
            }
        }else{
          //手机短信登录
          pageInfo.value = {
              title:'手机登录',
              loginType:'sms',
              toggleDes:'使用密码登录',
              component:markRaw(smsLogin)
            }
        }
      })
      //根据登入模式的切换，派发图标的名称
      let icon = computed(()=>{
        return isCommonLogin.value ? '#icon-iphone' : '#icon-yonghu'
      })
   </script>
  
   <style lang="less" >
   
   //定制组件，修改样式的思路
   //1.找到对应组件解构的类名
   //2.重新编写样式，覆盖原来的样式
 
   //样式修改不成功的因素和解决方案
   //1.确认类名是否正确
   //2.确认权重是否够
   //3.是否需要使用深度选择器xx :deep(选择器) scoped样式，层级嵌套比较深的时候
   
   .el-input{
      width: 200px;
 
   }
   .captchaname-from-item {
     .el-input{
        width: 100px;
     }
   }
   .el-form{
     .el-form-item{
         :deep(.el-form-item__label){
             color: white;
         }
     }
   }
 //   :deep(body){
 //     margin: 0;
 //     padding: 0;
 //   }
 
 .login{
     width: 200px;
 }
   .get-label {
     width: 100px;
     height: 32px;
     // border: 1px solid #d4d9e6;
     background-color: #fff;
     border-left: none;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     cursor:pointer;
    //  display:inline-block;
    svg{
      width: 100%;
      height: 100%;
    }
   }
   .login_box{
     width: 400px;
     height: 400px;
     background-color: rgba(0, 0, 0, .4);
     position: fixed;
     top: 148px;
     right: 48px;
   }
   .login_test{
   
     font-size: 30px;
     font-weight: 600;
     text-align: center;
     margin: 40px 0;
     color: white;
   }
   .video_a{
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: fill;
 
   }
   :deep(.el-form-item__content){
     width: 100px;
   }
  //  设置icon图标
  .icon{
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
  }
  .toggle{
    margin-left: 140px;
  }
   </style>
   